<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" @click="toIndex()">精选</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" @click="toCart()">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o" @click="toUser()">我</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";

export default {
  name: "Footer",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },

  data() {
    return {
      active: -1
    };
  },

  created() {
    console.log(this.$route.path);
    const path = this.$route.path;
    if (path.indexOf("index") > -1) {
      this.active = 0;
    }
    if (path.indexOf("cart") > -1) {
      this.active = 1;
    }
    if (path.indexOf("user") > -1) {
      this.active = 2;
    }
  },

  computed: {},

  methods: {
    toIndex() {
      this.$router.push({
        name: "index"
      });
    },
    toCart() {
      this.$router.push({
        name: "cart"
      });
    },
    toUser() {
      this.$router.push({
        name: "user"
      });
    }
  }
};
</script>

<style lang="less">
</style>
